<template>
    <div class="body">
        <div class="title">
            <h3>我的比赛</h3>
        </div>
        <div style="width:98%;margin:0px auto">
              <el-table
                :data="all"
                border
                size="small"
                style="width: 100%">
                <el-table-column prop="competitionCname" label="比赛名称"></el-table-column>
                <el-table-column prop="cname" label="项目名称" ></el-table-column>
                <el-table-column prop="createTime" label="创建时间" ></el-table-column>
                <el-table-column prop="teacherSid" label="指导老师ID" ></el-table-column>
                <el-table-column prop="number" label="项目编号"></el-table-column>
                <el-table-column label="上传文档">
                     <template slot-scope="scope">
                        <el-button type="warning" @click="dialogVisible(scope.$index, scope.row)">查看上传文档</el-button>

                        <el-dialog title="上传文档" :visible.sync="dialogFormVisible">
                            <template>
                                <el-table
                                    :data="getDocument"
                                    border
                                    style="width: 100%">
                                    <el-table-column
                                    prop="type"
                                    label="项目文档">
                                    </el-table-column>
                                    <el-table-column
                                    prop="uuid"
                                    label="文档状态">
                                        <template slot-scope="scope">
                                            <!-- <el-button v-if="scope.row.uuid != ''?true:false " type="text" @click="Download(scope.row.uuid)">下载文档</el-button> -->
                                            <a v-if="scope.row.uuid != ''?true:false " 
                                                class='download' 
                                                :href="`http://210.41.45.4/jxfl/download/single_download?sid=${scope.row.uuid}`"  
                                                title="下载"
                                            >
                                                点击下载
                                            </a>                                            
                                            <el-upload
                                                style="display:inline-block"
                                                v-if="scope.row.uuid != ''?true:false"
                                                :auto-upload="true"
                                                ref="uploadNew"
                                                :show-file-list='false'
                                                :on-success="newSuccess"
                                                accept="application/vnd.openxmlformats-officedocument.wordprocessingml.document"
                                                action="http://210.41.45.4/jxfl/upload/upload"
                                            >
                                                <el-button  type="text" slot="trigger" @click="Type(scope.row)">重新上传</el-button>
                                            </el-upload>

                                            <el-upload
                                                v-else
                                                :auto-upload="true"
                                                :show-file-list='false'
                                                ref="upload11"
                                                :on-success="handleSuccess"
                                                accept="application/vnd.openxmlformats-officedocument.wordprocessingml.document"
                                                action="http://210.41.45.4/jxfl/upload/upload"
                                            >
                                                <el-button type="primary" slot="trigger" @click="Type(scope.row)">上传文件</el-button>

                                            </el-upload>
                                        </template>
                                    </el-table-column>
                                </el-table>
                            </template>

                        </el-dialog>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination
				@size-change="handleSizeChange"
				@current-change="handleCurrentChange"
				:current-page="currpage"
				:page-sizes="[15, 35, 50, 100]"
				:page-size="pagesize"
				layout="total, sizes, prev, pager, next, jumper"
				:total="count">
            </el-pagination>
        </div>
    </div>
</template>

<script>
import {mapState} from 'vuex'
    export default {
        created(){
            // this.$store.dispatch('getProject',{page:this.currpage,size:this.pagesize})
        },
        data() {
            return {
                pagesize:15,
                currpage:1,
                name:'',
                type:'',
                sid:'',
                all: [],
                dialogFormVisible:false,
                roudata:{
                    competitionSid:'',
                    cname:'',
                    teacherSid:'',
                },
                getDocument:[
                    {
                        cname: "",
                        projectSid: '',
                        sid: '',
                        type: "项目申报书",                        
                        uuid: "",
                    },
                    {
                        cname: "",
                        projectSid: '',
                        sid: '',
                        type: "项目任务书",
                        uuid: "",
                    },
                    {
                        cname: "",
                        projectSid: '',
                        sid: '',
                        type: "进展日志",
                        uuid: "",
                    },
                    {
                        cname: "",
                        projectSid: '',
                        sid: '',
                        type: "项目中期报告",
                        uuid: "",
                    },
                    {
                        cname: "",
                        projectSid: '',
                        sid: '',
                        type: "项目结题报告",
                        uuid: "",
                    },
                    {
                        cname: "",
                        projectSid: '',
                        sid: '',
                        type: "项目延期结题",
                        uuid: "",
                    },
                    {
                        cname: "",
                        projectSid: '',
                        sid: '',
                        type: "项目变更申请",
                        uuid: "",
                    },
                    {
                        cname: "",
                        projectSid: '',
                        sid: '',
                        type: "项目终止申请",
                        uuid: "",
                    }
                ]
            }
        },
         methods: {
            handleSizeChange(val) {
                this.pagesize = val
                this.$store.dispatch('getProject',{page:this.currpage,size:this.pagesize})
            },
            handleCurrentChange(val) {
                this.currpage = val
                this.$store.dispatch('getProject',{page:this.currpage,size:this.pagesize})
            },
            //参加比赛
            addProject(data){
			console.log(data)
			this.dialogFormVisible = false
			this.$store.dispatch('addProject',data)
            },
            //查看上传文档
            dialogVisible(index, row){
                this.dialogFormVisible = true
                this.roudata.competitionSid = row.sid
                this.$store.dispatch('getDocument',row.sid)
                
                // console.log(row.sid)
            },
            //下载文档
            Download(uuid){
                this.$store.dispatch('Download',uuid)
            },
            //上传文档
            // submitUpload(){
            //     this.$refs.upload.submit();
            // },


            //重新上传成功
            newSuccess(response,file,fileList){
                // console.log(response)
                console.log(fileList)
                this.$store.dispatch('editDocument',{sid:this.sid,projectSid:this.getDocument[0].projectSid,cname:file.name,type:this.type,uuid:response.data})
                    .then(res => {
                        this.dialogFormVisible = false
                        this.$message({
                            message: '上传成功',
                            type: 'success'
                        });
                    })
                this.$refs.uploadNew.clearFiles()
            },
            //上传成功
            handleSuccess(response,file,fileList){
                // console.log(response)
                // console.log(fileList)
                this.$store.commit('setProject',file)
                this.$store.dispatch('addDocument',{projectSid:this.getDocument[0].projectSid,cname:file.name,type:this.type,uuid:response.data})
                    .then( res => {
                        this.dialogFormVisible = false
                        this.$message({
                            message: '上传成功',
                            type: 'success'
                        });
                    })
            },
            //当前文档类型
            Type(data){
                this.type = data.type
                this.sid=  data.sid
            },
            //改变文档状态
            changeDoc(index,data){
                this.getDocument[index].cname = data.cname
                this.getDocument[index].projectSid = data.projectSid
                this.getDocument[index].sid = data.sid
                this.getDocument[index].uuid = data.uuid
            },
        },
        computed:{
            ...mapState({
                'allCompetition':(state) => state.allCompetition.data,
                'count':(state) => state.allCompetition.count,
                'document':(state) => state.document,
            })
        },
        watch:{
            allCompetition:{
                handler: function (val, oldVal) {                                     
                    this.all = val;  
                    // console.log(this.all)
                }   
            },
            document:{
                handler:function(val,oldVal){
                    this.getDocument.forEach((item,index) => {
                        this.getDocument[index].cname = ''
                        this.getDocument[index].projectSid = ''
                        this.getDocument[index].sid = ''
                        this.getDocument[index].uuid = ''
                    })
                    for( let arr of val ){
                        // console.log(arr)
                        switch (arr.type) {
                            case '项目申报书':
                                    this.changeDoc(0,arr)
                                break;

                            case '项目任务书':
                                    this.changeDoc(1,arr)
                                break;

                            case '进展日志':
                                    this.changeDoc(2,arr)
                                break;

                            case '项目中期报告':
                                    this.changeDoc(3,arr)
                                break;

                            case '项目结题报告':
                                    this.changeDoc(4,arr)
                                break;

                            case '项目延期结题':
                                    this.changeDoc(5,arr)
                                break;

                            case '项目变更申请':
                                    this.changeDoc(6,arr)
                                break;

                            case '项目终止申请':
                                    this.changeDoc(7,arr)
                                break;
                        
                            default:
                                break;
                        }
                    }
                }
            }
        }
    }
</script>

<style lang="stylus" scoped>
.title{
    width: 90%
    margin: 20px 0px;
    padding: 10px;
    border-left: 5px solid #e95b3a
}
.download{
    margin-right 20px
    display:inline-block
    text-decoration:none
    height 40px
    line-height 40px
    color #409EFF
    a:hover{
        color #6eb2fe
    }
}
</style>